<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-07-30 20:02:30
 * @LastEditTime : 2020-01-07 13:30:10
 * @LastEditors  : Please set LastEditors
 -->
<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>Hello APP</title>
	<link rel="stylesheet" type="text/css" href="../css/vant.css">
	<link rel="stylesheet" type="text/css" href="../css/base.css" />
	<script type="text/javascript" src="../script/jquery.js"></script>
	<script type="text/javascript" src="../script/layer/mobile/layer.js"></script>
	<script type="text/javascript" src="../script/vue.min.js"></script>
	<script type="text/javascript" src="../script/vant.min.js"></script>
	<script type="text/javascript" src="../script/fastclick.js"></script>
	<script type="text/javascript" src="../script/base.js"></script>
	<script type="text/javascript" src="../script/db.js"></script>
	<style type="text/css">
		.p-select {
			padding: 0 30px 15px;
		}

		.p-select span,
		.p-select i {
			vertical-align: middle;
		}


		.shadow {
			box-shadow: 0 0 5px rgb(200, 198, 198);
			position: relative;
			background: #fff;
		}

		.sq {
			display: inline-block;
			width: 4px;
			height: 14px;
			background: #cd1b21;
			vertical-align: text-bottom;
			left: -15px;
			position: relative;
			box-shadow: 1px 0px 3px 0 #cd1b21;
		}

		.van-cell__value {
			text-align: right !important;
		}

		.row {
			padding-bottom: 10px;
			border-bottom: 1px dashed #cd1b21;
			position: relative;
		}

		.row .van-field__control {
			/* text-align: right; */
		}

		.row .van-cell__value {
			text-align: left !important;
		}

		.delete {
			width: 16px;
			height: 16px;
			margin-right: 5px;
		}

		.delete img {
			width: 16px;
			vertical-align: text-top;
		}

		.light .van-cell,
		.repeat .van-cell,
		.new .van-cell {
			background: transparent;
		}

		.light {
			background: rgba(255, 212, 131, 0.6);
		}
	</style>
</head>

<body>
	<div id="app" v-cloak>
		<div class="init-full" @click="clickDom($event)">
			<van-nav-bar class="head" title="仓库移库" left-arrow @click-left="onClickLeft">

				<div slot="right" class="head-right">
					<span @click.stop="showMenu = !showMenu">
						<img src="../image/menu.png" />
					</span>
				</div>

			</van-nav-bar>
			<div class="body-with-bottom">
				<div class="content content-padding">

					<div style="padding: 0 10px 15px;">
						<div class="shadow">
							<div class="content-label">基本信息</div>
							<div>
								<van-cell :value="formData.StockName" is-link @click="openSimpleScreen('仓库')">
									<div slot="title">
										<span class="sq"></span>
										<span style="margin-left:-8px;">仓库</span>
									</div>
								</van-cell>
								<van-field style="display: none;"></van-field>
							</div>

						</div>
					</div>

					<div class="p-select">

						<van-row gutter="30">
							<van-col span="12">
								<van-button type="primary" block size="small" @click="openScan">
									<van-icon name="scan"></van-icon>
									<span>扫描二维码</span>
								</van-button>
							</van-col>
							<van-col span="12">
								<van-button type="primary" block size="small" @click="openScreen(-1,60)">
									<van-icon name="add-o"></van-icon>
									<span>选择商品</span>
								</van-button>
							</van-col>
						</van-row>
					</div>
					<div style="padding: 0 10px 15px;">
						<div class="shadow">
							<div class="content-label">移库明细</div>
							<div class="no-data" v-show="!formDetailData.length">暂无数据</div>
							<div>
								<!-- <van-cell class="item" :border="false" v-for="(row,index) in formDetailData">
									<div slot="title" class="title">
										<div class="title-text">
											<span class="tag">{{formDetailData.length - index}}</span>
											<span class="delete" @click="deleteRow(row,index)">
												<img src="../image/delete.png" />
											</span>
											<span class="txt">{{row.name}}</span>
										</div>
										<div class="title-num">
											<span>{{row.StNum}}</span>
										</div>
									</div>
									<div slot="label" class="detail">
										<div>
											<van-cell title="商品编号" :value="row.code"></van-cell>
											<van-cell title="库位" :value="row.cname"></van-cell>

											<van-cell title="移库库位" :value="row.cargoName" is-link
												@click="openScreen(index,31)"></van-cell>
											<van-field label="移库数量" type="number" v-model="row.ynum">
											</van-field>
										</div>
									</div>
								</van-cell> -->

								<div v-for="(row,index) in formDetailData" class="row"
									:class="index < lightIndex?'light':''">
									<van-cell class="s">
										<div class="flex-box">
											<div class="flex-main" style="text-align: left;">
												<span class="delete" @click="deleteRow(index)">
													<img src="../image/delete.png" />
												</span>
												<span>{{row.name}}</span>
											</div>
											<div><span style="color: #9e9e9e;">当前库存：</span><span>{{row.StNum}}</span>
											</div>
										</div>

									</van-cell>
									<van-cell title="当前库位" :value="row.cname"></van-cell>

									<van-cell title="移库库位" :value="row.yname" @click="openScreen(index,32)">
										<span slot="right-icon" @click.stop="openScan1(index)"><img style="width: 22px;"
												src="../image/scan_black.png" /></span>
									</van-cell>
									<van-field label="移库数量" type="number" v-model="row.ynum" placeholder="请输入移库库位">
									</van-field>


								</div>

							</div>
						</div>
					</div>
				</div>
				<van-loading v-if="showLoading" />
			</div>
			<div class="bottom">
				<div class="bottom-left-label">
					<!-- <span>合计:</span>
					<span class="number">￥{{getTotalPrice()}}</span> -->
				</div>
				<div class="bottom-right-button">
					<van-button :disabled="ifConfirm" :loading="ifConfirm" loading-text="数据提交中..." type="primary" block
						@click="submitForm">提交</van-button>
				</div>
			</div>
		</div>

		<!-- <div class="head-menu" v-if="showMenu">
			<img class="menu-arrow" src="../image/menu-arrow.png" />

			<div @click="openHistory">
				<img src="../image/history.png" />
				<span>历史单据</span>
			</div>
		</div> -->

		<van-popup v-model="showSimpleSelect" position="bottom">
			<van-picker show-toolbar :columns="columns" value-key="S_Name" @cancel="showSimpleSelect = false"
				@confirm="simpleSelectChange"></van-picker>
		</van-popup>



	</div>
</body>

<script type="text/javascript">
	var vm;
	apiready = function () {
		//$('.init-full').show();

		var FNScanner = api.require('FNScanner');

		api.addEventListener({
			name: 'keyback'
		}, function (ret, err) {
			vm.onClickLeft();
		});

		api.addEventListener({
			name: 'selectRow'
		}, function (ret, err) {
			var selectType = ret.value.selectType;
			var type = ret.value.type;
			var row = ret.value.row;

			if (selectType == 32) {
				vm.formDetailData[type].yname = row.name;
				vm.formDetailData[type].yid = row.id;
				if (!vm.formDetailData[type].ynum) {
					vm.formDetailData[type].ynum = vm.formDetailData[type].StNum;
				}

			}

			if (selectType == 60) {
				var p_obj = {
					W_StockID: vm.formData.StockID,
					W_BarCode: '',
					W_SPID: row.id
				}
				FLD.ajax('APP_YKGN_XZSPN', p_obj, function (res) {

					if (res.ds[0].status && res.ds[0].status == 500) {
						layer.open({
							content: res.ds[0].msg,
							skin: 'msg',
							time: 2
						});
						vm.lightIndex = 0;
						return false;
					}

					for (var i in res.ds) {
						res.ds[i].yname = '';
						res.ds[i].yid = 0;
						res.ds[i].ynum = '';
					}
					vm.formDetailData = res.ds.concat(vm.formDetailData);
					vm.lightIndex = res.ds.length;
				})

			}

		});

		var userInfo = FLD.getUserInfo();
		vm = new Vue({
			el: '#app',
			data: {
				showLoading: false,
				ifConfirm: false,
				showMenu: false,
				lightIndex: 0,
				formData: {
					StockID: 0,
					StockName: '',
				},
				formDetailData: [],

				showSimpleSelect: false,
				SimpleSelectType: '',
				columns: [],

				stockArray: []

			},
			created: function () {
				var that = this;
				FLD.ajax('APP_YKGN_CKXZ', {}, function (res) {
					that.stockArray = res.ds;
				})

			},
			methods: {
				clickDom(e) {
					if (!$(e.target).closest('.head-menu').length) {
						this.showMenu = false;
					}
				},
				openScan() {
					var that = this;
					if (!that.formData.StockName) {
						layer.open({
							content: '请先选择仓库!',
							skin: 'msg',
							time: 2
						});
						return false;
					}
					FNScanner.open({
						autorotation: true
					}, function (ret, err) {
						if (ret) {
							if (ret.eventType == 'success') {
								var obj = {
									S_Type: 60,
									S_Cont: '',
									S_BranchID: userInfo.S_BranchID,
									S_SXZ: '',
									S_StockID: that.formData.StockID,
									S_CargoID: 0,
									S_BarCode: ret.content,
									S_PriceN: 0,
									S_ProductID: 0
								}
								FLD.ajax('AP_BasList', obj, function (res) {
									if (res.ds.length == 0) {
										layer.open({
											content: '当前二维码未查询到商品!',
											skin: 'msg',
											time: 2
										});
										return false;
									}
									var row = res.ds[0];
									var p_obj = {
										W_StockID: that.formData.StockID,
										W_BarCode: ret.content,
										W_SPID: row.id
									}
									FLD.ajax('APP_YKGN_XZSPN', p_obj, function (res) {
										if (res.ds[0].status && res.ds[0].status == 500) {
											layer.open({
												content: res.ds[0].msg,
												skin: 'msg',
												time: 2
											});
											that.lightIndex = 0;
											return false;
										}
										for (var i in res.ds) {
											res.ds[i].yname = '';
											res.ds[i].yid = 0;
											res.ds[i].ynum = ''
										}
										that.formDetailData = res.ds.concat(that.formDetailData);
										that.lightIndex = res.ds.length;
									})


								})
							}
						} else {
							layer.open({
								content: '扫描失败!',
								skin: 'msg',
								time: 2
							});

						}
					});
				},
				openScan1(index) {
					var that = this;
					FNScanner.open({
						autorotation: true
					}, function (ret, err) {
						if (ret) {
							if (ret.eventType == 'success') {
								var obj = {
									W_StockID: that.formData.StockID,
									W_BarCode: ret.content
								}
								FLD.ajax('APP_YKGN_XZHWS', obj, function (res) {
									if (!res.ds.length) {
										layer.open({
											content: '当前二维码未查询到库位!',
											skin: 'msg',
											time: 2
										});
										return false;
									}
									that.formDetailData[index].yid = res.ds[0].ncid;
									that.formDetailData[index].yname = res.ds[0].ncname;
									if (!that.formDetailData[index].ynum) {
										that.formDetailData[index].ynum = that.formDetailData[index].StNum;
									}

								})
							}
						} else {
							layer.open({
								content: '扫描失败!',
								skin: 'msg',
								time: 2
							});

						}
					});
				},
				openSimpleScreen(str) {
					var that = this;
					that.SimpleSelectType = str;
					if (str == '仓库') {
						that.columns = that.stockArray;
					}
					that.showSimpleSelect = true;
				},
				simpleSelectChange(value, index) {
					var that = this;
					if (that.SimpleSelectType == '仓库') {
						that.formData.StockID = that.columns[index].S_ID;
						that.formData.StockName = that.columns[index].S_Name;
					}

					that.showSimpleSelect = false;
				},
				openScreen(type, index) {
					var that = this;
					if (!that.formData.StockName) {
						layer.open({
							content: '请先选择仓库!',
							skin: 'msg',
							time: 2
						});
						return false;
					}
					var obj = {
						S_Type: index,
						S_Cont: '',
						S_BranchID: userInfo.S_BranchID,
						S_SXZ: '',
						S_StockID: that.formData.StockID,
						S_CargoID: 0,
						S_BarCode: '',
						S_PriceN: 0,
						S_ProductID: 0
					}

					api.openWin({
						name: '筛选' + index,
						url: 'common/baseScreen.html',
						reload: true,
						slidBackEnabled: false,
						pageParam: {
							filterData: obj,
							type: type,
							allowClear: false
						}
					})

				},

				deleteRow(index) {
					var that = this;
					that.$dialog.confirm({
						title: '提示',
						message: '是否去除该商品?'
					}).then(() => {

						if (index < that.lightIndex) {
							that.lightIndex--;
						}

						that.formDetailData.splice(index, 1);


					}).catch(() => {

					});

				},
				submitForm() {
					var that = this;

					if (!that.formData.StockName) {
						layer.open({
							content: '请先选择仓库!',
							skin: 'msg',
							time: 2
						});
						return false;
					}
					if (!that.formDetailData.length) {
						layer.open({
							content: '请选择需要移库的商品!',
							skin: 'msg',
							time: 2
						});
						return false;
					}

					var x = 0;
					for (var i in that.formDetailData) {
						if (!that.formDetailData[i].ynum || !that.formDetailData[i].yname) {
							x = 1;
						}
					}

					if (x == 1) {
						layer.open({
							content: '请完善明细信息!',
							skin: 'msg',
							time: 2
						});
						return false;
					}

					that.$dialog.confirm({
						title: '提示',
						closeOnClickOverlay: true,
						message: '是否确认提交?'
					}).then(() => {
						var W_STRDe = [];
						for (var i in that.formDetailData) {
							var array = [that.formDetailData[i].stid, that.formDetailData[i].id, that.formDetailData[i].cid, that.formDetailData[i].yid, that.formDetailData[i].ynum];
							W_STRDe.push(array.join())
						}

						var obj = {
							W_StockID: that.formData.StockID,
							W_STRDe: W_STRDe.join('|')
						}
						FLD.ajax('APP_YKGN_SJTJJN', obj, function (res) {
							if (res.ds[0].status && res.ds[0].status == 500) {
								layer.open({
									content: res.ds[0].msg,
									skin: 'msg',
									time: 2
								});

							} else {
								that.lightIndex = 0;
								that.formDetailData = [];

								layer.open({
									content: '提交成功',
									skin: 'msg',
									time: 2
								});
							}
						})


					}).catch(() => {

					});



				},


				getTotalCount() {
					var totalCount = 0;
					for (var i in this.formDetailData) {
						totalCount += this.formDetailData[i].num
					}
					return totalCount;
				},
				getTotalPrice() {
					var totalPrice = 0;
					for (var i in this.formDetailData) {
						if (this.formDetailData[i].price) {
							totalPrice += parseFloat(this.formDetailData[i].price);
						}

					}
					return totalPrice.toFixed(2);
				},

				openHistory() {
					api.openWin({
						name: '历史单据',
						url: 'common/historicalDocuments.html',
						reload: true,
						slidBackEnabled: false,
						pageParam: {
							type: 401
						}
					})
				},
				onClickLeft() {
					if (this.type == 3) {
						api.closeWin();
					} else {
						this.$dialog.confirm({
							title: '提示',
							message: '是否退出仓库移库界面?'
						}).then(() => {
							api.closeWin();
						}).catch(() => {

						});
					}

				}
			}
		})
	};
</script>

</html>